<template>
	<view style="overflow-x: hidden;">
		<view v-for="(item,index) in list" :key="index">
			<media-list type="one" :item="item" :index="index"></media-list>
			<view class="flex" style="height: 100rpx;">
				<view class="flex-1 flex align-center justify-center border-light-secondary" hover-class="bg-light" v-for="(m,mi) in options" :key="mi"
				@click="optionClick(m,index)">
					{{m.text}}
				</view>
			</view>
			<view class="f-divider"></view>
		</view>
		<!-- 默认样式 -->
		<view v-if="list.length===0" class="flex w-100 align-center justify-center text-secondary" style="height: 100rpx;">
			暂无数据
		</view>
		<view v-if="list.length>=10" class="flex align-center justify-center py-3 bg-light">
			<text class="text-muted font">{{loadtext}}</text>
		</view>
	</view>
</template>

<script>
	import mediaList from '@/components/common/media-list.vue';
	import {mapState} from 'vuex';
	export default {
		components: {
			mediaList
		},
		computed:{
			...mapState({
				user_id:state=>{
					return state.user?state.user.id:0
				}
			})
		},
		
		data() {
			return {
				options: [{
					text: '修改',
				},{
					text: '视频',
				}, {
					text: '删除',
				}],
				list:[],
				page:1,
				loadtext:'上拉加载更多'
			}
		},
		onLoad(options) {
			
		},
		onShow() {
			this.getData()
		},
		onPullDownRefresh() {
			this.page=1
			this.getData().then(res=>{
				uni.showToast({
					title:'刷新成功',
					icon:'none'
				})
				uni.stopPullDownRefresh()
			}).catch(err=>{
				uni.showToast({
					title:'刷新失败',
					icon:'none'
				})
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			if(this.loadtext!=='上拉加载更多'){
				return
			}
			this.page+=1
			this.getData().catch(err=>{
				this.page-=1
				this.loadtext="上拉加载更多"
			})
		},
		methods: {
			getData(){
				this.loadtext='加载中...'
				return this.$H.get(`/video_list/${this.page}?user_id=${this.user_id}`).then(res=>{
					this.list=this.page===1?res:[...this.list,...res],
					this.loadtext=this.page*10===this.list.length?'上拉加载更多':'没有更多啦'
				})
			},
			optionClick(e, index) {
				switch (e.text){
					case '修改':
					uni.navigateTo({
						url:'../create/create?data='+encodeURIComponent(JSON.stringify(this.list[index]))
					})
					break;
					case '视频':
					uni.navigateTo({
						url: '../user-video-list/user-video-list?id='+this.list[index].id
					});
						break;
				}
			}
		}
	}
</script>

<style>

</style>
